<template>
  <div class="preview-container">
    <div
      class="preview-content"
      :style="{ backgroundColor: viewData[0]?.backgroundColor || '#f5f5f5' }"
    >
      <!-- 顶部导航 -->
      <div v-if="viewData[0]" class="top-nav">
        <img :src="image" />
        <span class="tit">{{ viewData[0].title }}</span>
      </div>

      <!-- 预览内容 -->
      <div v-for="(item, index) in viewData" :key="index">
        <template v-if="index > 0">
          <component
            :is="getComponentByType(item.type)"
            :data="item"
          ></component>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
// import Product from "@/components/View/Product";
// import Images from "@/components/View/Images";
// import Banner from "@/components/View/Banner";
// import myText from "@/components/View/Text";

export default {
  name: "PreviewModal",
  components: {
    // Product,
    // Images,
    // Banner,
    // myText,
  },
  data() {
    return {
      viewData: [],
      image: require("@/assets/template/topNavBlack.png"),
    };
  },
  mounted() {
    // 从URL参数中获取预览数据
    const dataParam = this.$route.query.data;
    if (dataParam) {
      try {
        this.viewData = JSON.parse(dataParam);
      } catch (e) {
        console.error("解析预览数据失败", e);
      }
    }
  },
  methods: {
    getComponentByType(type) {
      switch (type) {
        case "text":
          return myText;
        case "banner":
          return Banner;
        case "product":
          return Product;
        case "images":
          return Images;
        default:
          return null;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.preview-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px;
}
.preview-content {
  width: 400px;
  min-height: 700px;
  background: #f5f5f5;
  overflow-y: auto;
  padding-top: 72px;
  box-shadow: 0 2px 6px #ccc;
}
.top-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 72px;
  padding: 25px 40px;
  box-sizing: border-box;
  z-index: 1000;
}
.tit {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-left: 15px;
}
</style>
